<!-- Vue 3 的 <Suspense> 组件允许你为异步组件提供一个加载中的回退内容和完成后的内容。
结合 defineAsyncComponent 使用，可以创建更流畅的用户体验。 -->
<template>
    <Suspense>
      <template #default>
        <!-- 显示正常组件内容 -->
        <AsyncComp />
      </template>
      <template #fallback>
        <!-- 显示加载中组件内容 -->
        <LoadingComponent />
      </template>
      <template #error>
        <!-- 显示错误处理组件内容 -->
        <ErrorComponent />
      </template>
    </Suspense>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
import { defineAsyncComponent } from 'vue';
import LoadingComponent from './LoadingComponent.vue'; // 加载中组件
import ErrorComponent from './ErrorComponent.vue'; // 错误处理组件

const AsyncComp = defineAsyncComponent({
    loader: () =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
        resolve(import('./MyComponent.vue'))
        }, 2000)
      }),
    loadingComponent: LoadingComponent, // 加载中组件
    errorComponent: ErrorComponent, // 错误处理组件
    delay: 500,  // 显示加载组件前的延迟,默认：200ms
});
</script>
<style scoped lang='scss'>
</style>